<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/lunbo04.css"/>
		<script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			$(function(){
				var i=0;
				//右按钮
				$("#btnRight").click(function(){
					$("#pic li").eq(i).fadeOut();
					
					if( i<$("#pic li").size()-1 ){
						i++;
					}else{
						i=0;   //回到第一张图片
					}
					$("#pic li").eq(i).fadeIn();
					$("#X_yd li").eq(i).addClass("xyd").siblings().removeClass("xyd");
				});
				
			//左按钮
				$("#btnLeft").click(function(){
					$("#pic li").eq(i).fadeOut();
					
					if( i>0 ){
						i--;
					}else{
						i=$("#pic li").size()-1;   //回到第一张图片
					}
					$("#pic li").eq(i).fadeIn();
					$("#X_yd li").eq(i).addClass("xyd").siblings().removeClass("xyd");
				});
				
				//小圆点
				$("#X_yd li").click(function(){
					$("#pic li").eq(i).fadeOut();
					i=$(this).index();
					$("#X_yd li").eq(i).addClass("xyd").siblings().removeClass("xyd");
					$("#pic li").eq(i).fadeIn();
				});
			});
		</script>
		
	</head>
	<body>
		<div id="lunbo">
			<!--图片-->
			<div class="picture">
						<!--关于标题 思路:
								1、可以使用一个数组，按顺序把所有图片的描述保存下来。
								2、使用a标签 或img标签的title属性来携带对图片的描述 。-->
				<ul id="pic">
					<!--轮播的原理 : 用js来控制 cur的位置 -->
					<li class="cur">
						<a href="#" title="0保时捷"> <img src="img/0保时捷.jpg"></a>
					</li>
					<li>
						<a href="#" title="1马自达"> <img src="img/1马自达.jpg"></a>
					</li>
					<li>
						<a href="#" title="2这是啥"> <img src="img/2这是啥.jpg"></a>
					</li>
					<li>
						<a href="#" title="3保时捷(2)"> <img src="img/3保时捷(2).jpg"></a>
					</li>
					<li>
						<a href="#" title="4克莱斯勒"> <img src="img/4克莱斯勒.jpg"></a>
					</li>

				</ul>
			</div>
			<!--黑框-->
			<div class="bg">
				<ul id="X_yd">
					<li class="xyd"></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
			<!--两个按钮-->
			<div class="btn">
				<a id="btnLeft" class="btnLeft"></a>
				<a id="btnRight" class="btnRight"></a>

			</div>
		</div>
	</body>
</html>
